<template>
	<div>
		<el-container>
			<el-main class="me-articles">
				<ArticleScrollPage>

				</ArticleScrollPage>
			</el-main>
			<!-- 右侧编辑连 -->
			<el-aside>
				<!-- 我的基本信息 -->
				<CardMe></CardMe>
				<!-- 最热标签 -->
				<card-tag :tags="hotTags"></card-tag>
				<!-- 最热文章 -->
				<card-article cardHeader="最热文章" :articles="hotArticles"></card-article>
				<!-- 文章归档 -->
				<card-archive cardHeader="文章归档" :archives="archives"></card-archive>
				<!-- 最新文章 -->
				<card-article cardHeader="最新文章" :articles="newArticles"></card-article>
			</el-aside>
		</el-container>
	</div>
</template>

<script>
	//导入对应组件
	import ArticleScrollPage from '@/components/common/ArticleScrollPage'
	import CardMe from '@/components/card/CardMe'
	import CardTag from '@/components/card/CardTag'
	import CardArticle from '@/components/card/CardArticle'
	import CardArchive from '@/components/card/CardArchive'
	import {
		getHotTags
	} from '@/api/tag'
	import {
		getHotArticles,
		getNewArticles,
		getArchives
	} from '@/api/article'


	export default {
		data() {
			return {
				hotTags: [],
				hotArticles: [],
				newArticles: [],
				archives:[]
			}
		},
		created() {
			this.getHotTags();
			this.getHotArticles();
			this.getNewArticles();
			this.getArchives();
		},
		methods: {
			//文章归档
			getArchives() {
				//发起HTTP请求，请求后端数据
				getArchives	().then((req) => {
					if (req.data.success) {
						this.archives = req.data.data;
					} else {
						this.$message.error(req.data.msg);
					}
				}).catch((err) => {
					this.$message.error("系统错误");
				}).finally(() => {})
			},
			//最热标签
			getHotTags() {
				//发起HTTP请求，请求后端数据
				getHotTags().then((req) => {
					if (req.data.success) {
						this.hotTags = req.data.data;
					} else {
						this.$message.error(req.data.msg);
					}
				}).catch((err) => {
					this.$message.error("系统错误");
				}).finally(() => {})
			},
			//最热文章
			getHotArticles() {
				//发起HTTP请求，请求后端数据
				getHotArticles().then((req) => {
					if (req.data.success) {
						this.hotArticles = req.data.data;
					} else {
						this.$message.error(req.data.msg);
					}
				}).catch((err) => {
					this.$message.error("系统错误");
				}).finally(() => {})
			},
			//最新文章 
			getNewArticles() {
				//发起HTTP请求，请求后端数据
				getNewArticles().then((req) => {
					if (req.data.success) {
						this.newArticles = req.data.data;
					} else {
						this.$message.error(req.data.msg);
					}
				}).catch((err) => {
					this.$message.error("系统错误");
				}).finally(() => {})
			}

		},
		//声明对应组件
		components: {
			ArticleScrollPage,
			CardMe,
			"card-tag": CardTag,
			"card-article": CardArticle,
			"card-archive": CardArchive
		}
	}
</script>

<style scoped>
	.el-container {
		width: 1200px;
	}

	.el-aside {
		margin-left: 20px;
		width: 260px;
	}

	.el-main {
		padding: 0px;
		line-height: 16px;
	}

	.el-card {
		border-radius: 0;
	}

	.el-card:not(:first-child) {
		margin-top: 20px;
	}
</style>